<template>
  <div>
    <!-- v-for可以用来遍历数组和对象，渲染页面解构 -->
    <!--v-for写法 v-for="item in 数组名" ，写在父级标签里面-->
    <!-- 子元素：<li>{{item}}</li> -->
    <!--v-for写法 v-for="（item，index） in 数组名" ，写在父级标签里面-->
    <!-- 子元素：<li>{{item}}</li> -->

    <!-- eslint-disable-next-line -->
    <ul v-for="(item,key) in renderData.data">
      <li>{{'姓名：'+item.uname+' 分数：'+item.score}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hobby: ['唱', '跳', 'rap'],
      renderData: {
        message: '获取数据成功',
        data: [
          {
            uname: '陈志豪',
            score: '100',
          },
          {
            uname: '沈德亮',
            score: '95',
          },
          {
            uname: '侯涵翔',
            score: '60',
          },
          {
            uname: '石益涛',
            score: '99',
          },
          {
            uname: '魏芳芳',
            score: '150',
          },
          {
            uname: '郑新新',
            score: '150',
          },
        ],
      },
    }
  },
}
</script>

<style></style>